<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak,v-text,v-html</title>

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="app">
    <p v-cloak>{{ msg }} +++ p1123</p>
    <p v-text="msg2"></p>
    <p v-text="msg2 + 'v-text属性中作加法'"></p>
    <div>
        {{msg3}}
    </div>

    <div v-text="msg3">
    </div>
    <div v-html="msg3+ 'v-text属性中作加法'">
    </div>
</div>
// v-cloak能够解决插值表达式的闪烁问题
//v-text的值是赋在属性上的
<p>1.默认v-text没有闪烁问题</p>
<p>2.插值表达式可以自己在标签上添加值</p>
<p>3.v-text会用指令里属性的值替换元素中的内容-覆盖</p>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"这是第一个输出",
            msg2:"这是v-text输出",
            msg3:"<h1>我想成为一个h1的html标签</h1>"
        }

    })

</script>

</body>
</html>